<template>
	<view class="city-list-container">
	
		<view class="city-title">
			当前定位
		</view> 
		<view class="city-list city-list-inline">
			<view class="city-item" @click="chooseCity(cur)">
				{{cur }}
			</view>
		</view>
		<!-- 热门城市 -->
		<view id="hotcity" class="city-list-content">
			<view class="city-title">
				{{hotcity.title}}
			</view> 
			<view class="city-list city-list-inline">
				<view class="city-item" v-for="(item,index) in hotcity.lists" :key="`city${index}`"  @click="chooseCity(item)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 排序列表 -->
		<u-index-list :scrollTop="scrollTop" :index-list="indexList">
			<view v-for="(item, index) in list" :key="index">
				<u-index-anchor :index="item.title" />
				<view class="list-cell u-border-bottom" v-for="(item1, index) in item.lists" :key="index" @click="chooseCity(item1)">
					{{item1}}
				</view>
			</view>
		</u-index-list> 
	</view>
	
</template>

<script>
	import indexList from "./citys.js";
	const letterArr = indexList.city.map(val => {
		return val.title;
	})
	export default {
		data() {
			return {
				hotcity:indexList.hotcity,
				scrollTop: 0,
				indexList: letterArr,
				list: indexList.city,
				cur:"",
			}
		},
		methods:{
			 chooseCity(city){
				  console.log("cname: ",city);
				  this.$store.state.curCity = city
				  uni.navigateBack()
			 }
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			var th = this;
			uni.request({ url: "http://pv.sohu.com/cityjson", method: 'GET',
					  success: function(res) { 
						  console.log("res: ",res);
						  var cname = JSON.parse(res.data.split("=")[1].replace(";","")).cname
						  console.log("cname: ",cname);
						  var tmp = cname.split("省")
						  if(tmp.length>1){
							  cname = tmp[1]
						  }
						  th.cur = cname.replace("市","") 
					  }, fail: function(err) { 
						  
					  }
			 })
		},
	}
</script>

<style lang="less">
	.citylist{
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;
	}
	.city-list-container{
		width: 100%;
		height: 100%;
		background-color: #ebebeb;
		font-size: 14px;
		color: #333;
		.city-list-content{
			margin-right: 25px;
		}
		.city-title{
			padding-left: 15px;
			line-height: 30px;
		}
		.city-list{
			padding-right: 30px;
		}
		.city-title-letter {
			padding-left: 25px;
		}
		.city-list-block {
			background-color: #f5f5f5;
			.city-item {
				height: 44px;
				line-height: 44px;
				margin-left: 15px;
				border-bottom: 1px solid #c8c7cc;
				&:last-child{
					border: 0;
				}
			}
		}
	   .city-list-inline {
			background-color: #f5f5f5;
			padding-bottom: 8px;
			overflow: hidden;
			&::after{
				content: "";
				clear: both;
			}
			.location-city,.city-item {
				float: left;
				background: #fff;
				width: 29%;
				height: 33px;
				margin-top: 15px;
				margin-left: 4%;
				padding: 0 4px;
				border: 1px solid #e6e6e6;
				border-radius: 3px;
				line-height: 33px;
				text-align: center;
				box-sizing: border-box;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.location-city{
				width: auto;
				min-width: 30%;
				padding: 0 20px;
			}
		}
	}
	
	.list-cell {
			display: flex;
			box-sizing: border-box;
			width: 100%;
			padding: 10px 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
		}
</style>
